<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {Message} from "@arco-design/web-vue";
import {addUserApi, getUserListApi, updateUserApi} from "../../apis/UserApi.js";
import {BASE_URL} from "../../config/index.js";
import {clearXlsxFileApi, deleteFileApi, downloadFileApi, getFileListApi} from "../../apis/FileApi.js";

const router = useRouter()
const fileList = ref([])
const searchInput = ref('')
const formRef = ref()
const pagination = ref({
    current: 1,
    pageSize: 6,
    total: 0, // 总条数初始为0
    showTotal: true, // 显示总数
    showPageSize: true, // 显示页码切换器
    showJumper: true, // 显示快速跳转
});
const fileType = ref(-1)
const dataLoading = ref(false);
const changeSelect = () => {
    pagination.value.current = 1
    getFileList()
}
// 修改后的获取数据方法
const getFileList = async () => {

    dataLoading.value = true
    const res = await getFileListApi(pagination.value.current, pagination.value.pageSize, fileType.value)
    if (res.code === 0) {
        fileList.value = res.data.records
        pagination.value.total = Number(res.data.total)
    } else {
        Message.error(res.message)
    }
    dataLoading.value = false
}
// 处理分页变化事件
const handlePageChange = (current) => {
    pagination.value.current = current
    getFileList()
}

const clearXlsx = async () => {
    const res = await clearXlsxFileApi()
    if (res.code === 0) {
        Message.success(res.message)
        await getFileList()
    } else {
        Message.error(res.message)
    }
}
const handleDelete = async (fileName) => {
    const res = await deleteFileApi(fileName)
    if (res.code === 0) {
        Message.success(res.message)
        await getFileList()
    } else {
        Message.error(res.message)
    }
}
const handleDownload = async (record) => {
    const res = await downloadFileApi(record.fileName)
    if (res.code === 0) {
        Message.success(res.message)
    } else {
        Message.error(res.message)
    }
}
// 处理每页数量变化事件
const handlePageSizeChange = (pageSize) => {
    pagination.value.pageSize = pageSize
    getFileList()
}

onMounted(async () => {
    await getFileList()
})
</script>

<template>
    <div class="py-8 px-24">
        <div>
            <a-popconfirm content="清空后不可恢复，确认清空吗？"
                          type="error"
                          @ok="clearXlsx()">
                <a-button type="primary">清空数据导出文件</a-button>

            </a-popconfirm>
            <a-select :style="{width:'220px'}"
                      class="ml-4"
                      @change="changeSelect()"
                      v-model="fileType" placeholder="选择文件类型">
                <a-option :value="-1">全部文件</a-option>
                <a-option :value="0">图片</a-option>
                <a-option :value="1">其他</a-option>
            </a-select>

            <a-button type="primary" @click="getFileList()"
                      class="ml-4"
                      :loading="dataLoading">刷新</a-button>


<!--            <a-input-search @search="getFileList" v-model="searchInput" class="ml-8" :style="{width:'360px'}"-->
<!--                            placeholder="搜索文件" search-button>-->
<!--                <template #button-icon>-->
<!--                    <icon-search/>-->
<!--                </template>-->
<!--                <template #button-default>-->
<!--                    搜索-->
<!--                </template>-->
<!--            </a-input-search>-->
        </div>
        <a-table
            :scroll="{x:2000,y:800}"
            bordered
            stripe
            :loading="dataLoading"
            :data="fileList"
            :pagination="pagination"
            @page-change="handlePageChange"
            @page-size-change="handlePageSizeChange"
            class="mt-4"
        >
            <template #columns>
                <a-table-column
                    title="文件名称"
                    dataIndex="fileName"
                    key="fileName"
                    width="200"
                />
                <a-table-column
                  title="预览"
                  dataIndex="url"
                  key="url"
                  width="220"
                >
                    <template #cell="{ record }">
                        <template v-if="record.type === 0">
                            <img :src="record.url" style="width: 100px;height: 100px;"/>
                        </template>
                        <template v-else>
                           <p>{{record.url}}</p>
                        </template>
                    </template>

                </a-table-column>
                <a-table-column
                  title="后缀"
                  dataIndex="suffix"
                  key="suffix"
                  width="100"
                />
                <a-table-column
                    title="文件大小"
                    dataIndex="fileSize"
                    key="fileSize"
                    width="90"
                />
                <a-table-column
                    title="创建时间"
                    dataIndex="updateTime"
                    key="updateTime"
                />


                <!-- 操作列 -->
                <a-table-column
                    title="操作"
                    :width="180"
                    fixed="right"
                >
                    <template #cell="{ record }">
                        <a-space>

                            <a-button
                                type="primary"
                                status="success"
                                @click="handleDownload(record)"
                            >
                                下载
                            </a-button>

                            <a-popconfirm content="删除后不可恢复，确认删除吗？"
                                ype="error"
                                @ok="handleDelete(record.fileName)">
                                <a-button
                                    type="primary"
                                    status="danger">
                                    删除
                                </a-button>
                            </a-popconfirm>


                        </a-space>
                    </template>
                </a-table-column>
            </template>
        </a-table>
    </div>



</template>

<style scoped>

</style>
